/**
 * x, y - qty of tiles
 */
function Board(x, y) {
    this.sizeX = x;
    this.sizeY = y;
    this.srcCode = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">';    
    this.tiles = new Array();
    
    this.generateTiles();
    
}

Board.prototype.getMySourceCode = function() {
    return this.srcCode + '</svg>';    
}

Board.prototype.displayMe = function(elemId) {
    $$('#' + elemId)[0].update(this.getMySourceCode());
}

Board.prototype.generateTiles = function() {
    for (i = 0; i < this.sizeX; i++) {
        newRow = Array();
        this.tiles.push(newRow);
        for (j = 0; j < this.sizeY; j++) {
            this.addTile(i, j);
        }
    }
}

Board.prototype.addTile = function(x, y) {
    this.tiles[x][y] = new Tile(x, y);
    this.srcCode = this.srcCode + this.tiles[x][y].srcCode;
}

/********************/

function Tile(x, y) {
    this.height = 100;
    this.width = 200;
    // coordinates of the center of the tile
    this.coordinate_x = x * 200;
    this.coordinate_y = y * 100;
    this.srcCode = '';
    this.generateSrcCode(x, y);
}

Tile.prototype.setX = function(value) {
    this.coordinate_x = value;
}

Tile.prototype.setY = function(value) {
    this.coordinate_y = value;
}

Tile.prototype.generateSrcCode = function(x, y) {
    color = '#000';
    if (x%2 && y%2) {
        color = '#f00';
    } else if (x%2) {
        color = '#0f0';
    } else if (this.y%2) {
        color = '#00f';
    }
    
    this.srcCode = '<polygon style="fill: ' + color + '" points="' + (this.coordinate_x) + ',' + (this.coordinate_y - (0.5 * this.height)) + ' ' + (this.coordinate_x - (0.5 * this.width)) + ',' + this.coordinate_y + ' ' + this.coordinate_x + ',' + (this.coordinate_y + (0.5 * this.height)) + ' ' + (this.coordinate_x + (0.5 * this.width)) + ',' + this.coordinate_y + '" ></polygon><text fill="blue" x="' + this.coordinate_x + '" y="' + this.coordinate_y + '">' + x + ',' + y + '</text>'
}

Tile.prototype.getMySourceCode = function() {
    return this.srcCode;
}
